<template>
	<view class="content">
		<view style="width: 100%;height: 30px;text-align: center;margin-top: 10px;">
			<text style="font-size: 30px; background-image: linear-gradient(to right,#0072FF,#00EAFF,#01AAFF); -webkit-background-clip:text; color: transparent;">河南农大智慧农业监测系统</text>
		</view>
		<view style="width: 100%;height: calc(100% - 70px);margin-top: 30px;">
			<map style="width: 100%; height: 100%;background-color: #007AFF;" :latitude="latitude" :longitude="longitude" :markers="markers" @markertap="markerClick" @callouttap="markerClick" scale="3"></map>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				baseList: [],
				latitude: 34.76,//39.909,
				longitude: 113.65,//116.39742,
				markers: [],
				merchantId: ""
			}
		},
		onLoad(e) {
			this.getData(e.id);
		},
		methods: {
			markerClick(e) {
				let index = parseInt(e.detail.markerId);
				console.log(index);
				uni.navigateTo({
					url:'/pages/baseDetail?id='+this.merchantId+'&index='+index
				})
			},
			getData(e) {
				this.merchantId = e;
				let that = this;
				this.$http.post({
					data: {
						cmd: "getBaseList",
						merchantId: e,
						nowPage:1,
						pageCount:100
					}
				}).then(res => {
					if (res.statusCode == 200) {
						if (res.data.result == 0) {
							that.baseList = res.data.body.dataList;
							if (that.baseList.length > 0) {
								let points = [];
								for (let i = 0; i<that.baseList.length; i++) {
									let point = {
										id: i,
									    latitude: that.baseList[i].lat,
									    longitude: that.baseList[i].lon,
									    iconPath: '../static/icon_010.png',
									    callout:{
									        content:that.baseList[i].name,
									        color:'#000',
											// bgColor: '#aff',
									        fontSize:12,
											display:'ALWAYS'
									    }
									}
									points.push(point);
								}
								that.markers = points;
							}
						} else {
							that.$msg(res.data.resultNote);
						}
					} else {
						that.$msg('网络出错！');
					}
				});
			},
			operHandle() {
				
			}
		}
	}
</script>

<style lang="less">
	page {
		color: #fff;
		background: #ddd url(@/static/icon_000.png);
		background-size: 100% 100%;
		background-position: 0 0;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
	}
	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}
</style>
